<template>
  <div>
    <el-row class="my-main">
      <system-info />
      <curtain-control style="margin-top: 10px" />
      <blob-control style="margin-top: 10px" />
      <fan-control style="margin-top: 10px" />
      <door-control style="margin-top: 10px" />
      <oled-control style="margin-top: 10px" />
    </el-row>
  </div>
</template>

<script>
import systemInfo from '@/views/Home/components/SystemInfo.vue'
import curtainControl from '@/views/Home/components/CurtainControl.vue'
import blobControl from '@/views/Home/components/BlobControl.vue'
import fanControl from '@/views/Home/components/FanControl.vue'
import oledControl from '@/views/Home/components/OledControl.vue'
import doorControl from "@/views/Home/components/DoorControl.vue"

export default {
  name: "Index",
  data() {
    return {
    }
  },
  components: {
    systemInfo,
    curtainControl,
    blobControl,
    fanControl,
    oledControl,
    doorControl
  }
}
</script>

<style scoped>
.my-main {
  background-color: #DCDFE6;
  height: 100%;
  padding: 10px;
  margin-bottom: 50px;
}
</style>
